<template>
  <el-card class="right-content" shadow="hover">
    <el-tabs v-model="activeTab" type="border-card">
      <!-- 检查报告标签页 -->
      <el-tab-pane label="检查报告" name="checkReport">
        <h3 class="tab-title">检查报告</h3>
        <el-table :data="checkReports" style="width: 100%" border stripe>
          <el-table-column prop="name" label="检查名称" />
          <el-table-column prop="date" label="检查日期" width="120" />
          <el-table-column prop="doctor" label="检查医生" width="100" />
          <el-table-column prop="status" label="状态" width="100">
            <template #default="{ row }">
              <el-tag :type="row.status === '已完成' ? 'success' : 'warning'">{{ row.status }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="result" label="结果" width="100">
            <template #default="{ row }">
              <el-tag :type="row.result === '正常' ? 'success' : 'warning'">{{ row.result }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120" fixed="right">
            <template #default="{ row }">
              <el-button size="small" type="primary">查看详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>

      <!-- 用药记录标签页 -->
      <el-tab-pane label="用药记录" name="medicationRecord">
        <h3 class="tab-title">用药记录</h3>
        <el-table :data="medicationRecords" style="width: 100%" border stripe>
          <el-table-column prop="name" label="药品名称" />
          <el-table-column prop="dosage" label="剂量" width="80" />
          <el-table-column prop="frequency" label="频次" width="120" />
          <el-table-column prop="duration" label="疗程" width="80" />
          <el-table-column prop="doctor" label="开方医生" width="100" />
          <el-table-column prop="date" label="开方日期" width="120" />
          <el-table-column label="操作" width="120" fixed="right">
            <template #default="{ row }">
              <el-button size="small" type="primary">查看详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>

      <!-- 就诊记录标签页 -->
      <el-tab-pane label="就诊记录" name="visitRecord">
        <h3 class="tab-title">就诊记录</h3>
        <el-table :data="visitRecords" style="width: 100%" border stripe>
          <el-table-column prop="date" label="就诊日期" width="120" />
          <el-table-column prop="department" label="科室" width="100" />
          <el-table-column prop="doctor" label="医生" width="100" />
          <el-table-column prop="diagnosis" label="诊断" />
          <el-table-column prop="treatment" label="治疗方案" />
          <el-table-column label="操作" width="120" fixed="right">
            <template #default="{ row }">
              <el-button size="small" type="primary">查看详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </el-card>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// 当前选中的标签页
const activeTab = ref('checkReport')

// 检查报告数据
const checkReports = ref([
  {
    id: 1,
    name: '血常规检查',
    date: '2024/04/04',
    doctor: '李医生',
    status: '已完成',
    result: '正常'
  },
  {
    id: 2,
    name: 'B超检查',
    date: '2024/04/04',
    doctor: '王医生',
    status: '已完成',
    result: '轻度异常'
  }
])

// 用药记录数据
const medicationRecords = ref([
  {
    id: 1,
    name: '阿莫西林胶囊',
    dosage: '0.5g',
    frequency: '每日3次',
    duration: '7天',
    doctor: '李医生',
    date: '2024/04/04'
  },
  {
    id: 2,
    name: '布洛芬片',
    dosage: '0.2g',
    frequency: '需要时服用',
    duration: '3天',
    doctor: '李医生',
    date: '2024/04/04'
  }
])

// 就诊记录数据
const visitRecords = ref([
  {
    id: 1,
    date: '2024/04/04',
    department: '普外科',
    doctor: '李医生',
    diagnosis: '上呼吸道感染',
    treatment: '药物治疗'
  },
  {
    id: 2,
    date: '2024/03/15',
    department: '内科',
    doctor: '张医生',
    diagnosis: '胃炎',
    treatment: '药物治疗'
  }
])
</script>

<style scoped lang="scss">
.right-content {
  flex: 1;
  border-radius: 8px;
  overflow: hidden;
  
  .tab-title {
    margin-top: 0;
    margin-bottom: 16px;
    font-size: 16px;
    font-weight: 500;
    color: #303133;
  }
  
  :deep(.el-tabs__header) {
    margin-bottom: 20px;
  }
  
  :deep(.el-tabs) {
    border-radius: 8px;
    overflow: hidden;
  }

  :deep(.el-table) {
    border-radius: 4px;
    overflow: hidden;
  }
}
</style>